const gulp = require("gulp");
const connect = require("gulp-connect");
const htmlmin = require("gulp-htmlmin");
const uglify = require("gulp-uglify");
const babel = require("gulp-babel");
const sass = require("gulp-sass")(require('sass'));
const cssmin = require("gulp-cssmin");

gulp.task("sayhi", async () => {
      console.log("hello gulp");
});

gulp.task("connect", async () => {
      connect.server({
            livereload: true
      });
});

// 1. 新增一个html功能，可以转存src之中的所有.html 文件; 

gulp.task("html", async () => {
      gulp.src(["./src/**/*.html"])
            .pipe(gulp.dest("./dist"))
            // 转存结束后要调用 reload 方法配合页面刷新; 
            .pipe(connect.reload());
});

gulp.task("html-min", async () => {
      gulp.src(["./src/**/*.html"])
            .pipe(htmlmin({ collapseWhitespace: true }))
            .pipe(gulp.dest("./dist"))
            // 转存结束后要调用 reload 方法配合页面刷新; 
            .pipe(connect.reload());
});

gulp.task("javascripts", async () => {
      gulp.src(["./src/javascripts/**/*.js"])
            .pipe(gulp.dest("./dist/javascripts"))
            // 转存结束后要调用 reload 方法配合页面刷新; 
            .pipe(connect.reload());
});

gulp.task("javascripts-min", async () => {
      gulp.src(["./src/javascripts/**/*.js"])
            .pipe(uglify())
            .pipe(gulp.dest("./dist/javascripts"))
            // 转存结束后要调用 reload 方法配合页面刷新; 
            .pipe(connect.reload());
});

gulp.task("javascripts-babel", async () => {
      gulp.src(["./src/javascripts/**/*.js"])
            .pipe(babel({
                  presets: ['@babel/env']
            }))
            // uglify 在某些场景下压缩 babel转义之后的代码会发生报错; 
            // - 如果遇到这种情况， 我们暂时只能两个插件二选一; 
            .pipe(uglify())
            .pipe(gulp.dest("./dist/javascripts"))
            // 转存结束后要调用 reload 方法配合页面刷新; 
            .pipe(connect.reload());
});

gulp.task("scss", async () => {
      gulp.src(["./src/scss/**/*.scss"])
            .pipe(sass().on('error', sass.logError))
            .pipe(gulp.dest("./dist/css/"))
            // 转存结束后要调用 reload 方法配合页面刷新; 
            .pipe(connect.reload());
});

gulp.task("scss-min", async () => {
      gulp.src(["./src/scss/**/*.scss"])
            .pipe(sass().on('error', sass.logError))
            .pipe(cssmin())
            .pipe(gulp.dest("./dist/css/"))
            // 转存结束后要调用 reload 方法配合页面刷新; 
            .pipe(connect.reload());
});


// 2. 我们在开启服务器之后命令行就不能输入新的指令了 , 提前做好html指令调用的逻辑
gulp.task("watch", async () => {
      gulp.watch(["./src/**/*.html"], gulp.parallel("html"));
      gulp.watch(["./src/javascripts/**/*.js"], gulp.parallel("javascripts"));
      gulp.watch(["./src/scss/**/*.scss"], gulp.parallel("scss"));
});


// 3. 我们如何同时开启watch和connect两个指令; 

gulp.task("default", gulp.series("html", "scss", "javascripts", gulp.parallel("connect", "watch")));

// 做一个组合指令 : 

gulp.task("build", gulp.series("html-min", "scss-min", "javascripts-min"));

